//轮播图组件
Vue.component('broadcast-swiper', {
    template: `<div class="swiper-wrap">
                    <div class="swiper-container">
                            <div  class="swiper-wrapper">
                                <div class="swiper-slide" v-for="item in broadcast">
                                    <img :src="item" alt="轮播">
                                </div>
                            </div>
                            <slot name="array"></slot>
                            <slot name="pagination"></slot>
                   </div>
            </div>`,
    props: {
        'broadcast': {
            type: Array,
            default: function () {
                return []
            }
        },
    },
    mounted: function () {
        mySwiper()
    }
})

//轮播图
function mySwiper(page, isPage) {
    var mySwiper = new Swiper('.swiper-container', {
        autoplay: {
            stopOnLastSlide: true
        },
        loop: true,
        pagination: {  //分页器
            el: page,
            clickable: isPage,
        },
        navigation: {  //前进后退按钮
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    })
}